<template>
  <div>
    <van-search
        v-model="searchData"
        shape="round"
        background="#f04142"
        placeholder="请输入搜索关键词"
        @search="searchHandle"
    />
    <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
    >
      <editor/>
      <van-cell v-for="item in list" :key="item">
        <van-card>
          <template #thumb>
            <img src="https://img01.yzcdn.cn/vant/ipad.jpeg" style="width: 88px;height: 88px"/>
          </template>
          <template #title>
            <span class="news-title">这是标题</span>
          </template>
          <template #desc>
            <p class="desc-content"> 这是描述西悉尼 </p>
          </template>
          <template #price>
            这是昵称
          </template>
          <template #num>
            14评论
          </template>
          <!--          <template #footer>-->
          <!--            <van-button size="mini">按钮</van-button>-->
          <!--            <van-button size="mini">按钮</van-button>-->
          <!--          </template>-->
        </van-card>
      </van-cell>
    </van-list>
    <van-tabbar v-model="active" active-color="#ee0a24">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="add-o">发布</van-tabbar-item>
      <van-tabbar-item icon="friends-o">设置</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
// @ is an alias to /src
import Editor from "@/components/Editor";

export default {
  name: 'Home',
  components: {
    Editor
  },
  data() {
    return {
      searchData: '',
      list: [],
      loading: false,
      finished: false,
      active: 0
    }
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    searchHandle(val) {
      console.log(val)
    }
  }
}
</script>
<style scoped>
.my-header {
  height: 80px;
  background-color: #f04142;
}

.van-cell {
  padding: 0 !important;
}

.news-title {
  font-size: 18px;
  font-weight: bold;
}

.desc-content {
  font-size: 16px;
}
</style>
